<template>
	<div class="hello">
		<el-card class="total-card">
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="item">
						<el-card>
							<p>独生子女数量:{{ isAloneCount }}</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="item">
						<el-card>
							<p>城市户口学生数量:{{ accountCount }}</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="item">
						<el-card>
							<p>已成年学生数量:{{ ageCount }}</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="item">
						<el-card>
							<p>已接种新冠疫苗人数:{{ inoculationCount }}</p>
						</el-card>
					</div>
				</el-col>
			</el-row>
			<el-row style="margin-top: 20px;">
				<el-card>
					<el-row>
						<el-button type="success" @click="addStudent">新增学生</el-button>
						<el-button type="warning" @click="onDelete('checked')">删除选中</el-button>
						<el-button type="danger" @click="onDelete('all')">删除全部</el-button>
					</el-row>
					<el-row style="margin-top: 20px;">
						<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>
							<el-table-column prop="age" label="年龄" width="80"></el-table-column>
							<el-table-column prop="isAlone" label="是否独生" width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.isAlone ? '独生子女' : '非独生' }}
								</template>
							</el-table-column>
							<el-table-column prop="account" label="户口" width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.account ? '城市户口' : '农村户口' }}
								</template>
							</el-table-column>
							<el-table-column prop="iphone" label="手机" width="150" align="center"></el-table-column>
							<el-table-column prop="idCard" label="身份证" width="180" align="center"></el-table-column>
							<el-table-column prop="address" label="地址" align="center"></el-table-column>
							<el-table-column label="新冠疫苗" width="100" align="center">
								<template slot-scope="scope">
									{{ scope.row.inoculation ? '已接种' : '未接种' }}
								</template>
							</el-table-column>
							<el-table-column label="操作" width="150" align="center">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="onDelete(scope.row.id)">删除</el-button>
									<el-button size="mini" @click="onEdit(scope.row)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
				</el-card>
			</el-row>
		</el-card>
		<AddOrUpdata ref="AddOrUpdata" v-if="showAddOrUpdata" @myClose="myClose"></AddOrUpdata>
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
import AddOrUpdata from './AddOrUpdata';
export default {
	name: 'HelloWorld',
	components: {
		AddOrUpdata
	},
	data() {
		return {
			multipleSelection: [],
			showAddOrUpdata: false
		};
	},
	computed: {
		...mapState(['tableData']),
		...mapGetters(['isAloneCount', 'accountCount', 'inoculationCount', 'ageCount'])
	},
	methods: {
		...mapMutations(['deleteTableData']),
		addStudent() {
			this.showAddOrUpdata = true;
			this.$nextTick(() => {
				this.$refs.AddOrUpdata.open();
			});
		},
		myClose() {
			this.showAddOrUpdata = false;
		},
		onEdit(row) {
			this.showAddOrUpdata = true;
			this.$nextTick(() => {
				this.$refs.AddOrUpdata.open(row);
			});
		},
		onDelete(type) {
			console.log(type);
			let msg = ''
			let arr = []
			if (type === 'checked') {
				msg = '选中'
				arr = this.multipleSelection
			} else if (type === 'all') {
				msg='全部'
				arr = this.tableData.map(item => item.id)
			} else {
				msg='id为'+type
				arr = [type]
			}
			this.$confirm('此操作将永久删除'+msg+'的文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.deleteTableData(arr);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
		},
		handleSelectionChange(val) {
			this.multipleSelection = val.map(item => item.id);
		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.hello {
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
}

.total-card {
	height: 100%;
}
</style>
